<?php

use yii\helpers\Url;
$web = Url::base();
?>
<script type="application/javascript" src="<?= $web ?>/js/echarts.js"></script>

<script type="application/javascript">
    $(function () {
        // Workaround for bug in mouse item selection
        $.fn.typeahead.Constructor.prototype.blur = function () {
            var that = this;
            setTimeout(function () {
                that.hide()
            }, 250);
        };

        var products = [
            {
                id: 0,
                name: "Deluxe Bicycle",
                price: 499.98
            },
            {
                id: 1,
                name: "Super Deluxe Trampoline",
                price: 134.99
            },
            {
                id: 2,
                name: "Super Duper Scooter",
                price: 49.95
            }
        ];

        $('#product_search').typeahead({
            source: function (query, process) {
                var results = _.map(institution, function (institution) {
                    return institution.name;
                });
                process(results);
            }
        });

        var source = [
            {
                id: '1',
                name: '1',
                children: [
                    {
                        id: '11',
                        name: '11'
                    },
                    {
                        id: '12',
                        name: '12',
                        children: [
                            {
                                id: '121',
                                name: '121'
                            },
                            {
                                id: '122',
                                name: '122'
                            }
                        ]
                    }
                ]
            },
            {
                id: '2',
                name: '2',
            }
        ];

        var eeee = $('#aaaaaaaaaaaa').treeAutocomplete({
            defaultText: 'aaaaaa',
            source: institution,
            onSelected: function (element) {
                alert(element.getValue());
            }
        });

//        var ele = $('#asdfasdfasdfasdfafds').treeAutocomplete(institution);
        $('#btnaaaaa').click(function () {
            eeee.setValue('I1');
//            ele.setDisabled(true);
        });
        $('#1111111').click(function () {
//            ele.setValue('I11');
            eeee.setDisabled(true);
        });
        $('#2222222').click(function () {
            eeee.setDisabled(false);
        });
        $('#3333333').click(function () {
            alert($('#aaaaaaaaaaaa').val());
        });
        $('#4444444').click(function () {
            alert($('#searchInstitution').val());
        });
        $('#5555555').click(function () {
            alert($('#searchInstitution1111').val());
        });
//        $('#txtInput').focus(function () {
//            $(this).parent().find('.dropdown-menu').show();
//        }).blur(function () {
//            $(this).parent().find('.dropdown-menu').hide();
//        }).on('input', function () {
//            var text = $(this).val();
//            $(this).parent().find('.dropdown-menu').append('<li><a href="#">' + text + '</a></li>');
//        }).keydown(function (e) {
//            switch (e.keyCode) {
//                case 40:
//                    var active = $(this).parent().find('.dropdown-menu').find('.active').removeClass('active');
//                    var next = active.next();
//                    next.addClass('active');
//                    break;
//            }
//        }).keyup(function (e) {
//            switch (e.keyCode) {
//                case 13:
//                    var text = $(this).parent().find('.dropdown-menu').find('.active a').text();
//                    $(this).val(text);
//                    break;
//            }
//        });

        initRecharge('month');
        initSellAmount('month');
    });

    function initRecharge(type) {
        // 基于准备好的dom，初始化echarts实例
        var rechargeChart = echarts.init(document.getElementById('recharge_charts_panel'));
        var dateAxisData = [];
        var rechargesAxisData = [];

        var data = {};
        data.type = type;
        requestJson("get-recharged-amount-handler", data, true, function (response) {
            switch (type) {
                case "month":
                    type = "(月)";
                    break;
                case "quarter":
                    type = "(季度)";
                    break;
                case "year":
                    type = "(年)";
                    break;
            }
            if (response.status == 0) {
                var datasource = response.data;

                $(datasource).each(function () {
                    dateAxisData.push(this.date);
                    rechargesAxisData.push(this.amount);

                    // 指定图表的配置项和数据
                    option = {
                        title: {
                            text: '付款总金额' + type
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['总金额']
                        },
                        toolbox: {
                            feature: {
                                myTool1: {
                                    show: true,
                                    title: '按月',
                                    icon: 'image://../../images/chart/month.png',
                                    onclick: function () {
                                        initRecharge("month");
                                    }
                                },
                                myTool2: {
                                    show: true,
                                    title: '按季度',
                                    icon: 'image://../../images/chart/quarter.png',
                                    onclick: function () {
                                        initRecharge("quarter");
                                    }
                                },
                                myTool3: {
                                    show: true,
                                    title: '按年',
                                    icon: 'image://../../images/chart/year.png',
                                    onclick: function () {
                                        initRecharge("year");
                                    }
                                },
                                saveAsImage: {}
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: true,
                                data: dateAxisData
                            }
                        ],
                        yAxis: [
                            {
                                name: '总金额',
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '总金额',
                                type: 'bar',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top'
                                    }
                                },
                                areaStyle: {normal: {}},
                                data: rechargesAxisData
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    rechargeChart.setOption(option);
                });
            }
        });
    }

    function initSellAmount(type) {
        // 基于准备好的dom，初始化echarts实例
        var salesChart = echarts.init(document.getElementById('sales_charts_panel'));

        var dateAxisData = [];
        var quantityAxisData = [];
        var sellingPriceAxisData = [];

        var data = {};
        data.type = type;
        requestJson("get-sell-amount-handler", data, true, function (response) {
            switch (type) {
                case "month":
                    type = "(月)";
                    break;
                case "quarter":
                    type = "(季度)";
                    break;
                case "year":
                    type = "(年)";
                    break;
            }
            if (response.status == 0) {
                var datasource = response.data;
                $(datasource).each(function () {
                    dateAxisData.push(this.date);
                    quantityAxisData.push(this.quantity);
                    sellingPriceAxisData.push(this.selling_price);
                });

                // 指定图表的配置项和数据
                option = {
                    title: {
                        text: '销售情况' + type
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['销售额', '订单量']
                    },
                    toolbox: {
                        feature: {
                            myTool1: {
                                show: true,
                                title: '按月',
                                icon: 'image://../../images/chart/month.png',
                                onclick: function () {
                                    initSellAmount("month");
                                }
                            },
                            myTool2: {
                                show: true,
                                title: '按季度',
                                icon: 'image://../../images/chart/quarter.png',
                                onclick: function () {
                                    initSellAmount("quarter");
                                }
                            },
                            myTool3: {
                                show: true,
                                title: '按年',
                                icon: 'image://../../images/chart/year.png',
                                onclick: function () {
                                    initSellAmount("year");
                                }
                            },
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: true,
                            data: dateAxisData
                        }
                    ],
                    yAxis: [
                        {
                            name: '销售额',
                            type: 'value'
                        },
                        {
                            name: '订单量',
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '销售额',
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            areaStyle: {normal: {}},
                            data: sellingPriceAxisData
                        },
                        {
                            name: '订单量',
                            type: 'line',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            areaStyle: {normal: {}},
                            data: quantityAxisData
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                salesChart.setOption(option);
            }
        });
    }

</script>




<div style="margin: 50px 50px">
    <label for="product_search">Product Search: </label>
    <input id="product_search" type="text" data-provide="typeahead">
</div>
<button id="btnaaaaa">setvalue</button>
<button id="1111111">disabled</button>
<button id="2222222">enabled</button>
<button id="3333333">控件1值</button>
<button id="4444444">控件2值</button>
<button id="5555555">控件3值</button>
<!--<div class="tree-autocomplete iconic-input right" id="asdfasdfasdfasdfafds">-->
<!--    <i class="fa fa-sort"></i>-->
<!--    <input type="hidden" id="hiddenInput">-->
<!--    <input type="text" class="form-control" placeholder="left icon">-->
<!--    <ul class="dropdown-menu">-->
<!--    </ul>-->
<!--</div>-->

<div id="aaaaaaaaaaaa"></div>

<?= app\widgets\InstitutionHierarchyAutocompleteWidget::widget(['id' => 'searchInstitution', 'currentInstitutionCode' => 'I1', 'defaultText' => '----选择查询机构----']) ?>
<?= app\widgets\InstitutionHierarchyAutocompleteWidget::widget(['id' => 'searchInstitution1111', 'currentInstitutionCode' => 'I11', 'defaultText' => '----选择查询机构----']) ?>


<!--<div class="tree-autocomplete">-->
<!--    <input type="hidden" id="hiddenInput">-->
<!--    <input type="text" id="txtInput">-->
<!--    <ul class="dropdown-menu" aria-labelledby="txtInput">-->
<!--        <li class="active"><a href="#">Action</a></li>-->
<!--        <li><a href="#">Another action</a></li>-->
<!--        <li><a href="#">Something else here</a></li>-->
<!--        <li><a href="#">Separated link</a></li>-->
<!--    </ul>-->
<!--</div>-->

<!-- button -->
<div>
    <h3 class="panel-title-m">Button</h3>
    <div class="panel">
        <header class="panel-heading">
            Default Buttons
            <span class="tools pull-right">
                    <a class="fa fa-chevron-down" href="javascript:;"></a>
                    <a class="fa fa-times" href="javascript:;"></a>
                </span>
        </header>
        <div class="panel-body">
            <p>Use any of the available button classes to quickly create a styled button.</p>
            <button class="btn btn-default" type="button">Default</button>
            <button class="btn btn-primary" type="button">Primary</button>
            <button class="btn btn-success" type="button">Success</button>
            <button class="btn btn-info" type="button">Info</button>
            <button class="btn btn-warning" type="button">Warning</button>
            <button class="btn btn-danger" type="button">Danger</button>
            <button class="btn btn-link" type="button">Link</button>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <section class="panel">
                <header class="panel-heading">
                    Buttons Sizes
                    <span class="tools pull-right">
                                <a class="fa fa-chevron-down" href="javascript:;"></a>
                                <a class="fa fa-times" href="javascript:;"></a>
                            </span>
                </header>
                <div class="panel-body">
                    <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or
                        <code>.btn-xs</code> for additional sizes.</p>
                    <div class=" ">
                        <p>
                            <button class="btn btn-primary btn-lg" type="button">Large button</button>
                            <button class="btn btn-default btn-lg" type="button">Large button</button>
                        </p>
                        <p>
                            <button class="btn btn-primary" type="button">Default button</button>
                            <button class="btn btn-info" type="button">Default button</button>
                            <button class="btn btn-default" type="button">Default button</button>
                        </p>
                        <p>
                            <button class="btn btn-primary btn-sm" type="button">Small button</button>
                            <button class="btn btn-default btn-sm" type="button">Small button</button>
                            <button class="btn btn-danger btn-sm" type="button">Small button</button>
                        </p>
                        <p>
                            <button class="btn btn-primary btn-xs" type="button">Extra small button</button>
                            <button class="btn btn-default btn-xs" type="button">Extra small button</button>
                        </p>
                        <p>
                            <button class="btn btn-info btn-xs" type="button">Extra small button</button>
                            <button class="btn btn-success btn-xs" type="button">Extra small button</button>
                            <button class="btn btn-warning btn-xs" type="button">Extra small button</button>
                        </p>
                    </div>
                </div>
            </section>
        </div>
        <div class="col-md-6">
            <section class="panel">
                <header class="panel-heading">
                    block level buttons
                    <span class="tools pull-right">
                                <a class="fa fa-chevron-down" href="javascript:;"></a>
                                <a class="fa fa-times" href="javascript:;"></a>
                            </span>
                </header>
                <div class="panel-body">
                    <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding
                        <code>.btn-block</code>.</p>
                    <p>
                        <button class="btn btn-success btn-lg btn-block" type="button">Block level button</button>
                        <button class="btn btn-warning btn-block" type="button">Block level button</button>
                        <button class="btn btn-danger btn-xs btn-block" type="button">Block level button</button>
                    </p>
                    <div class="highlight"><pre><code class="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span
                                    class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg btn-block"</span><span
                                    class="nt">&gt;</span>Block level button<span class="nt">&lt;/button&gt;</span>
                            </code></pre>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <section class="panel">
                <header class="panel-heading">
                    Disabled Buttons
                    <span class="tools pull-right">
                                <a class="fa fa-chevron-down" href="javascript:;"></a>
                                <a class="fa fa-times" href="javascript:;"></a>
                            </span>
                </header>
                <div class="panel-body">
                    <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
                    <button disabled="disabled" class="btn btn-primary " type="button">Primary button</button>
                    <button disabled="disabled" class="btn btn-default " type="button">Button</button>
                </div>
            </section>
        </div>
        <div class="col-md-6">
            <section class="panel">
                <header class="panel-heading">
                    Button tags
                    <span class="tools pull-right">
                                <a class="fa fa-chevron-down" href="javascript:;"></a>
                                <a class="fa fa-times" href="javascript:;"></a>
                            </span>
                </header>
                <div class="panel-body">
                    <p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code>
                        element.</p>
                    <form>
                        <a role="button" href="#" class="btn btn-primary">Link</a>
                        <button type="submit" class="btn btn-primary">Button</button>
                        <input type="button" value="Input" class="btn btn-primary">
                        <input type="submit" value="Submit" class="btn btn-primary">
                    </form>
                </div>
            </section>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <section class="panel">
                <header class="panel-heading">
                    Buttons Groups
                    <span class="tools pull-right">
                                <a class="fa fa-chevron-down" href="javascript:;"></a>
                                <a class="fa fa-times" href="javascript:;"></a>
                            </span>
                </header>
                <div class="panel-body">
                    <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
                    <div style="margin: 9px 0 5px;" class="btn-group">
                        <button class="btn btn-default" type="button">Left</button>
                        <button class="btn btn-default" type="button">Middle</button>
                        <button class="btn btn-default" type="button">Right</button>
                    </div>
                    <div style="margin: 9px 0 5px;" class="btn-group">
                        <button class="btn btn-primary" type="button">Left</button>
                        <button class="btn btn-primary" type="button">Middle</button>
                        <button class="btn btn-primary" type="button">Right</button>
                    </div>
                    <h4>Button toolbar</h4>
                    <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div
                            class="btn-toolbar"&gt;</code> for more complex components.</p>
                    <div>
                        <div style="margin: 0;" role="toolbar" class="btn-toolbar">
                            <div class="btn-group">
                                <button class="btn btn-default" type="button">1</button>
                                <button class="btn btn-default" type="button">2</button>
                                <button class="btn btn-default" type="button">3</button>
                                <button class="btn btn-default" type="button">4</button>
                            </div>
                            <div class="btn-group">
                                <button class="btn btn-default" type="button">5</button>
                                <button class="btn btn-default" type="button">6</button>
                                <button class="btn btn-default" type="button">7</button>
                            </div>
                            <div class="btn-group">
                                <button class="btn btn-default" type="button">8</button>
                            </div>
                        </div>
                    </div>
                    <h4>Nesting</h4>
                    <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown
                        menus mixed with a series of buttons.</p>
                    <div>
                        <div class="btn-group">
                            <button class="btn btn-default" type="button">1</button>
                            <button class="btn btn-default" type="button">2</button>

                            <div class="btn-group">
                                <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"
                                        id="btnGroupDrop1">
                                    Dropdown
                                    <span class="caret"></span>
                                </button>
                                <ul aria-labelledby="btnGroupDrop1" role="menu" class="dropdown-menu">
                                    <li><a href="#">Dropdown link</a></li>
                                    <li><a href="#">Dropdown link</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-success" type="button">1</button>
                            <button class="btn btn-success" type="button">2</button>

                            <div class="btn-group">
                                <button data-toggle="dropdown" class="btn btn-success dropdown-toggle" type="button"
                                        id="btnGroupDrop1">
                                    Dropdown
                                    <span class="caret"></span>
                                </button>
                                <ul aria-labelledby="btnGroupDrop1" role="menu" class="dropdown-menu">
                                    <li><a href="#">Dropdown link</a></li>
                                    <li><a href="#">Dropdown link</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </section>
            <div class="row">
                <div class="col-md-12">
                    <section class="panel">
                        <header class="panel-heading">
                            Button dropdowns
                            <span class="tools pull-right">
                                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                                        <a href="javascript:;" class="fa fa-times"></a>
                                     </span>
                        </header>
                        <div class="panel-body">
                            <p>Turn a button into a dropdown toggle with some basic markup changes.</p>
                            <div>
                                <div class="btn-group">
                                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"
                                            type="button">Default <span class="caret"></span></button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div><!-- /btn-group -->
                                <div class="btn-group">
                                    <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle"
                                            type="button">Primary <span class="caret"></span></button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div><!-- /btn-group -->
                                <div class="btn-group">
                                    <button data-toggle="dropdown" class="btn btn-success dropdown-toggle"
                                            type="button">Success <span class="caret"></span></button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div><!-- /btn-group -->
                                <div class="btn-group">
                                    <button data-toggle="dropdown" class="btn btn-info dropdown-toggle" type="button">
                                        Info <span class="caret"></span></button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div><!-- /btn-group -->
                                <div class="btn-group">
                                    <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle"
                                            type="button">Warning <span class="caret"></span></button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div><!-- /btn-group -->

                            </div>
                        </div>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <section class="panel">
                        <header class="panel-heading">
                            Split button dropdowns
                            <span class="tools pull-right">
                                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                                        <a href="javascript:;" class="fa fa-times"></a>
                                     </span>
                        </header>
                        <div class="panel-body">
                            <p>Similarly, create split button dropdowns with the same markup changes, only with a
                                separate button.</p>
                            <div>
                                <div class="btn-group">
                                    <button class="btn btn-default" type="button">Default</button>
                                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"
                                            type="button">
                                        <span class="caret"></span>
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div><!-- /btn-group -->
                                <div class="btn-group">
                                    <button class="btn btn-primary" type="button">Primary</button>
                                    <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle"
                                            type="button">
                                        <span class="caret"></span>
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div><!-- /btn-group -->
                                <div class="btn-group">
                                    <button class="btn btn-success" type="button">Success</button>
                                    <button data-toggle="dropdown" class="btn btn-success dropdown-toggle"
                                            type="button">
                                        <span class="caret"></span>
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div><!-- /btn-group -->
                                <div class="btn-group">
                                    <button class="btn btn-info" type="button">Info</button>
                                    <button data-toggle="dropdown" class="btn btn-info dropdown-toggle" type="button">
                                        <span class="caret"></span>
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div><!-- /btn-group -->
                            </div>
                        </div>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <section class="panel">
                        <header class="panel-heading">
                            Sizing button dropdowns
                            <span class="tools pull-right">
                                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                                        <a href="javascript:;" class="fa fa-times"></a>
                                     </span>
                        </header>
                        <div class="panel-body">
                            <p>Button dropdowns work with buttons of all sizes.</p>
                            <div>
                                <p role="toolbar" class="btn-toolbar">
                                <div class="btn-group">
                                    <button data-toggle="dropdown" type="button"
                                            class="btn btn-default btn-lg dropdown-toggle">
                                        Large button <span class="caret"></span>
                                    </button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div><!-- /btn-group -->
                                <div class="btn-group">
                                    <button data-toggle="dropdown" type="button"
                                            class="btn btn-success btn-lg dropdown-toggle">
                                        Large button <span class="caret"></span>
                                    </button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div><!-- /btn-group -->
                                </p><!-- /btn-toolbar -->
                                <p role="toolbar" class="btn-toolbar">
                                <div class="btn-group">
                                    <button data-toggle="dropdown" type="button"
                                            class="btn btn-default btn-sm dropdown-toggle">
                                        Small button <span class="caret"></span>
                                    </button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div><!-- /btn-group -->
                                <div class="btn-group">
                                    <button data-toggle="dropdown" type="button"
                                            class="btn btn-warning btn-sm dropdown-toggle">
                                        Small button <span class="caret"></span>
                                    </button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div><!-- /btn-group -->
                                <div class="btn-group">
                                    <button data-toggle="dropdown" type="button"
                                            class="btn btn-info btn-sm dropdown-toggle">
                                        Small button <span class="caret"></span>
                                    </button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div><!-- /btn-group -->
                                </p><!-- /btn-toolbar -->
                                <p role="toolbar" class="btn-toolbar">
                                <div class="btn-group">
                                    <button data-toggle="dropdown" type="button"
                                            class="btn btn-default btn-xs dropdown-toggle">
                                        Extra small button <span class="caret"></span>
                                    </button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div><!-- /btn-group -->
                                <div class="btn-group">
                                    <button data-toggle="dropdown" type="button"
                                            class="btn btn-info btn-xs dropdown-toggle">
                                        Extra small button <span class="caret"></span>
                                    </button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div><!-- /btn-group -->
                                <div class="btn-group">
                                    <button data-toggle="dropdown" type="button"
                                            class="btn btn-danger btn-xs dropdown-toggle">
                                        Extra small button <span class="caret"></span>
                                    </button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div><!-- /btn-group -->
                                </p><!-- /btn-toolbar -->
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <section class="panel">
                <header class="panel-heading">
                    Buttons Groups Sizing
                    <span class="tools pull-right">
                                <a class="fa fa-chevron-down" href="javascript:;"></a>
                                <a class="fa fa-times" href="javascript:;"></a>
                            </span>
                </header>
                <div class="panel-body">
                    <p>Instead of applying button sizing classes to every button in a group, just add
                        <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
                    <p role="toolbar" class="btn-toolbar">
                    <div class="btn-group btn-group-lg">
                        <button class="btn btn-default" type="button">Left</button>
                        <button class="btn btn-default" type="button">Middle</button>
                        <button class="btn btn-default" type="button">Right</button>
                    </div>
                    </p>
                    <p role="toolbar" class="btn-toolbar">
                    <div class="btn-group">
                        <button class="btn btn-default" type="button">Left</button>
                        <button class="btn btn-default" type="button">Middle</button>
                        <button class="btn btn-default" type="button">Right</button>
                    </div>
                    </p>
                    <p role="toolbar" class="btn-toolbar">
                    <div class="btn-group btn-group-sm">
                        <button class="btn btn-default" type="button">Left</button>
                        <button class="btn btn-default" type="button">Middle</button>
                        <button class="btn btn-default" type="button">Right</button>
                    </div>
                    </p>
                    <p role="toolbar" class="btn-toolbar">
                    <div class="btn-group btn-group-xs">
                        <button class="btn btn-default" type="button">Left</button>
                        <button class="btn btn-default" type="button">Middle</button>
                        <button class="btn btn-default" type="button">Right</button>
                    </div>
                    </p>
                </div>
            </section>

            <div class="row">
                <div class="col-md-12">
                    <section class="panel">
                        <header class="panel-heading">
                            Justified Button groups
                            <span class="tools pull-right">
                                        <a class="fa fa-chevron-down" href="javascript:;"></a>
                                        <a class="fa fa-times" href="javascript:;"></a>
                                     </span>
                        </header>
                        <div class="panel-body">
                            <p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.
                            </p>
                            <div class="btn-group btn-group-justified">
                                <a href="#" class="btn btn-success">Left</a>
                                <a href="#" class="btn btn-info">Middle</a>
                                <a href="#" class="btn btn-danger">Right</a>
                            </div>
                        </div>
                    </section>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <section class="panel">
                        <header class="panel-heading">
                            Buttons With Icon
                            <span class="tools pull-right">
                                        <a class="fa fa-chevron-down" href="javascript:;"></a>
                                        <a class="fa fa-times" href="javascript:;"></a>
                                     </span>
                        </header>
                        <div class="panel-body">
                            <p>
                                <button class="btn btn-primary" type="button"><i class="fa fa-cloud"></i> Cloud</button>
                                <button class="btn btn-success" type="button"><i class="fa fa-eye"></i> View</button>
                                <button class="btn btn-info " type="button"><i class="fa fa-refresh"></i> Update
                                </button>
                                <button class="btn btn-default " type="button"><i class="fa fa-cloud-upload"></i> Upload
                                </button>
                                <button class="btn btn-warning" data-toggle="button">
                                    <i class="fa fa-thumbs-up "></i>
                                    89
                                </button>
                            </p>
                            <p>
                                <button class="btn btn-default" data-toggle="button">
                                    <i class="fa fa-book"></i>
                                </button>
                                <button class="btn btn-default" data-toggle="button">
                                    <i class="fa fa-cogs"></i>
                                </button>
                                <button class="btn btn-default" data-toggle="button">
                                    <i class="fa fa-list"></i>
                                </button>
                                <button class="btn btn-default" data-toggle="button">
                                    <i class="fa fa-desktop"></i>
                                </button>
                                <button class="btn btn-default" data-toggle="button">
                                    <i class="fa fa-file"></i>
                                </button>
                                <button class="btn btn-default" data-toggle="button">
                                    <i class="fa fa-lemon-o"></i>
                                </button>
                                <button class="btn btn-default" data-toggle="button">
                                    <i class="fa fa-lock"></i>
                                </button>
                                <button class="btn btn-default" data-toggle="button">
                                    <i class="fa fa-male"></i>
                                </button>
                                <button class="btn btn-default" data-toggle="button">
                                    <i class="fa fa-map-marker"></i>
                                </button>
                            </p>


                            <div class="">
                                <button class="btn btn-block btn-primary" type="button"><span class="pull-left"><i
                                            class="fa fa-facebook"></i></span> <span
                                        class="bold">Login with Facebook</span></button>
                                <button class="btn btn-block btn-info" type="button"><span class="pull-left"><i
                                            class="fa fa-twitter"></i></span> <span
                                        class="bold">Login with Twitter</span></button>
                                <button class="btn btn-block btn-danger" type="button"><span class="pull-left"><i
                                            class="fa fa-google-plus"></i></span> <span
                                        class="bold">Login with Google +</span></button>
                                <button class="btn btn-block btn-default" type="button"><span class="pull-left"><i
                                            class="fa fa-flickr"></i></span> <span class="bold">Login with Flickr</span>
                                </button>
                            </div>
                        </div>
                    </section>

                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <section class="panel">
                        <header class="panel-heading">
                            Star Rating Example
                            <span class="tools pull-right">
                                        <a class="fa fa-chevron-down" href="javascript:;"></a>
                                        <a class="fa fa-times" href="javascript:;"></a>
                                     </span>
                        </header>
                        <div class="panel-body">
                              <span class="rating">
                                  <span class="star"></span>
                                  <span class="star"></span>
                                  <span class="star"></span>
                                  <span class="star"></span>
                                  <span class="star"></span>
                              </span>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- other -->
<div>
    <h3 class="panel-title-m">Other</h3>
    <div class="row">
        <div class="col-md-12">
            <!--breadcrumbs start -->
            <ul class="breadcrumb panel">
                <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="#">Dashboard</a></li>
                <li class="active">Current page</li>
            </ul>
            <!--breadcrumbs end -->
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <!--notification start-->
            <section class="panel">
                <header class="panel-heading">
                    Alerts
                    <span class="tools pull-right">
                                <a class="fa fa-chevron-down" href="javascript:;"></a>

                                <a class="fa fa-times" href="javascript:;"></a>
                            </span>
                </header>
                <div class="panel-body">
                    <p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four
                        contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
                    <div class="alert alert-success alert-block fade in">
                        <button type="button" class="close close-sm" data-dismiss="alert">
                            <i class="fa fa-times"></i>
                        </button>
                        <h4>
                            <i class="icon-ok-sign"></i>
                            Success!
                        </h4>
                        <p>Best check yo self, you're not looking too good...</p>
                    </div>

                    <div class="alert alert-success fade in">
                        <button type="button" class="close close-sm" data-dismiss="alert">
                            <i class="fa fa-times"></i>
                        </button>
                        <strong>Well done!</strong> You successfully read this important alert message.
                    </div>
                    <div class="alert alert-info fade in">
                        <button type="button" class="close close-sm" data-dismiss="alert">
                            <i class="fa fa-times"></i>
                        </button>
                        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                    </div>
                    <div class="alert alert-warning fade in">
                        <button type="button" class="close close-sm" data-dismiss="alert">
                            <i class="fa fa-times"></i>
                        </button>
                        <strong>Warning!</strong> Best check yo self, you're not looking too good.
                    </div>
                    <div class="alert alert-block alert-danger fade in">
                        <button type="button" class="close close-sm" data-dismiss="alert">
                            <i class="fa fa-times"></i>
                        </button>
                        <strong>Oh snap!</strong> Change a few things up and try submitting again.
                    </div>

                    <div class="highlight">
<pre>
<code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span
        class="s">"alert alert-success"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span><span
        class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span><span
        class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span><span
        class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
</code>
</pre>
                    </div>

                </div>
            </section>
            <!--notification end-->
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <section class="panel">
                <div class="carousel slide auto panel-body" id="c-slide">
                    <ol class="carousel-indicators out">
                        <li data-target="#c-slide" data-slide-to="0" class="active"></li>
                        <li data-target="#c-slide" data-slide-to="1" class=""></li>
                        <li data-target="#c-slide" data-slide-to="2" class=""></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="item text-center active">
                            <h3>AdminEx is an Awesome Dashboard</h3>
                            <p>Awesome admin template</p>
                            <small class="text-muted">Based on Latest Bootstrap 3.1.0</small>
                        </div>
                        <div class="item text-center">
                            <h3>Well Organized</h3>
                            <p>Awesome admin template</p>
                            <small class="text-muted">Huge UI Elements</small>
                        </div>
                        <div class="item text-center">
                            <h3>Well Documentation</h3>
                            <p>Awesome admin template</p>
                            <small class="text-muted">Very Easy to Use</small>
                        </div>
                    </div>
                    <a class="left carousel-control" href="#c-slide" data-slide="prev">
                        <i class="fa fa-angle-left"></i>
                    </a>
                    <a class="right carousel-control" href="#c-slide" data-slide="next">
                        <i class="fa fa-angle-right"></i>
                    </a>
                </div>
            </section>
            <div class="row">
                <div class="col-md-12">
                    <!--pagination start-->
                    <section class="panel">
                        <header class="panel-heading">
                            Initail Collaps bar
                            <span class="tools pull-right">
                                        <a class="fa fa-chevron-up" href="javascript:;"></a>

                                        <a class="fa fa-times" href="javascript:;"></a>
                                    </span>
                        </header>
                        <div style="display: none;" class="panel-body">
                            contents goes here
                        </div>
                    </section>
                    <!--pagination end-->
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <!--gritter notification start-->
                    <section class="panel">
                        <header class="panel-heading">
                            Notifications (Gritter)
                            <span class="tools pull-right">
                                        <a class="fa fa-chevron-down" href="javascript:;"></a>
                                        <a class="fa fa-times" href="javascript:;"></a>
                                    </span>
                        </header>
                        <div class="panel-body">
                            <p class="text-muted">Click on below buttons to check it out.</p>
                            <a href="javascript:;" class="btn btn-default btn-sm" id="add-regular">Regular</a>
                            <a href="javascript:;" class="btn btn-success  btn-sm" id="add-sticky">Sticky</a>
                            <a href="javascript:;" class="btn btn-info  btn-sm" id="add-without-image">Imageless</a>

                            <a href="javascript:;" class="btn btn-warning  btn-sm" id="add-gritter-light">Light</a>
                            <a href="javascript:;" class="btn btn-primary  btn-sm" id="add-max">Max of 3</a>
                            <a href="#" class="btn btn-danger  btn-sm" id="remove-all">Remove all</a>
                        </div>
                    </section>
                    <!--gritter notification end-->
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <!--tooltips start-->
                    <section class="panel">
                        <div class="panel-body btn-gap">
                            <button data-original-title="Tooltip on top" type="button" class="btn btn-default tooltips"
                                    data-toggle="tooltip" data-placement="top" title="">Tooltip on top
                            </button>

                            <button data-original-title="Tooltip on left" type="button" class="btn btn-default tooltips"
                                    data-toggle="tooltip" data-placement="left" title=""> left
                            </button>

                            <button type="button" class="btn btn-default tooltips" data-toggle="tooltip "
                                    data-placement="bottom" title="" data-original-title="Tooltip on bottom"> bottom
                            </button>

                            <button type="button" class="btn btn-default tooltips" data-toggle="tooltip"
                                    data-placement="right" title="" data-original-title="Tooltip on right"> right
                            </button>
                        </div>
                    </section>
                    <!--tooltips end-->
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <!--popover start-->
                    <section class="panel">
                        <div class="panel-body btn-gap">
                            <button class="btn btn-info popovers" data-trigger="hover" data-placement="top"
                                    data-content="And here's some amazing content. It's very engaging. right?"
                                    data-original-title="Popovers in top">Popover on Top
                            </button>

                            <button class="btn btn-info popovers" data-trigger="hover" data-placement="bottom"
                                    data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                                    data-original-title="Popovers in bottom">Bottom
                            </button>

                            <button class="btn btn-info popovers" data-trigger="hover" data-placement="right"
                                    data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                                    data-original-title="Popovers in right">Right
                            </button>

                            <button class="btn btn-info popovers" data-trigger="hover" data-placement="left"
                                    data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                                    data-original-title="Popovers in left">Left
                            </button>
                        </div>
                    </section>
                    <!--popover end-->
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <!--modal start-->
                    <section class="panel">
                        <header class="panel-heading">
                            Modal Dialogs
                            <span class="tools pull-right">
                                        <a class="fa fa-chevron-down" href="javascript:;"></a>

                                        <a class="fa fa-times" href="javascript:;"></a>
                                    </span>
                        </header>
                        <div class="panel-body">
                            <a href="#myModal" data-toggle="modal" class="btn btn-success">
                                Dialog
                            </a>
                            <a href="#myModal2" data-toggle="modal" class="btn btn-warning">
                                Confirm
                            </a>
                            <a href="#myModal3" data-toggle="modal" class="btn btn-danger">
                                Alert !
                            </a>
                            <!-- Modal -->
                            <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"
                                 id="myModal" class="modal fade">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                                                ×
                                            </button>
                                            <h4 class="modal-title">Modal Tittle</h4>
                                        </div>
                                        <div class="modal-body">

                                            Body goes here...

                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close
                                            </button>
                                            <button type="button" class="btn btn-success">Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- modal -->
                            <!-- Modal -->
                            <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"
                                 id="myModal2" class="modal fade">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                                                ×
                                            </button>
                                            <h4 class="modal-title">Modal Tittle</h4>
                                        </div>
                                        <div class="modal-body">

                                            Body goes here...

                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close
                                            </button>
                                            <button type="button" class="btn btn-warning"> Confirm</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- modal -->
                            <!-- Modal -->
                            <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"
                                 id="myModal3" class="modal fade">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                                                ×
                                            </button>
                                            <h4 class="modal-title">Modal Tittle</h4>
                                        </div>
                                        <div class="modal-body">

                                            Body goes here...

                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-danger"> Ok</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- modal -->

                        </div>
                    </section>
                    <!--modal end-->
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <!--pagination start-->
                    <section class="panel">
                        <header class="panel-heading">
                            Pagination
                            <span class="tools pull-right">
                                <a class="fa fa-chevron-down" href="javascript:;"></a>

                                <a class="fa fa-times" href="javascript:;"></a>
                            </span>
                        </header>
                        <div class="panel-body">
                            <h4>Sizing</h4>
                            <p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code>
                                for additional sizes.</p>

                            <div>
                                <ul class="pagination pagination-lg">
                                    <li><a href="#">«</a></li>
                                    <li><a href="#">1</a></li>
                                    <li class="active"><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">»</a></li>
                                </ul>
                            </div>
                            <div class="">
                                <ul class="pagination">
                                    <li><a href="#">«</a></li>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li class="active"><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">»</a></li>
                                </ul>
                            </div>
                            <div>
                                <ul class="pagination pagination-sm">
                                    <li><a href="#">«</a></li>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li class="active"><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">»</a></li>
                                </ul>
                            </div>


                        </div>

                    </section>
                    <section class="panel">
                        <div class="panel-body">
                            <div>
                                <h4>Default example</h4>

                                <ul class="pager">
                                    <li><a href="#">Previous</a></li>
                                    <li><a href="#">Next</a></li>
                                </ul>
                            </div>
                            <hr>
                            <div>
                                <h4>Aligned links</h4>
                                <ul class="pager">
                                    <li class="previous"><a href="#">← Older</a></li>
                                    <li class="next"><a href="#">Newer →</a></li>
                                </ul>
                            </div>
                            <hr>
                            <div>
                                <h4>Optional disabled state</h4>
                                <p>Pager links also use the general <code>.disabled</code> utility class from the
                                    pagination.</p>
                                <ul class="pager">
                                    <li class="previous disabled"><a href="#">← Older</a></li>
                                    <li class="next"><a href="#">Newer →</a></li>
                                </ul>
                            </div>
                        </div>
                    </section>
                    <!--pagination end-->
                </div>
            </div>

        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <!--label and badge start-->
                    <section class="panel">
                        <header class="panel-heading">
                            Labels & badge
                            <span class="tools pull-right">
                                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                                        <a href="javascript:;" class="fa fa-times"></a>
                                    </span>
                        </header>
                        <div class="panel-body">
                            <p class="text-muted text-center">Add any of the below mentioned modifier classes to change
                                the appearance of a label.</p>
                            <p class="text-center">
                                <span class="label label-default">Default</span>
                                <span class="label label-primary">Primary</span>
                                <span class="label label-success">Success</span>
                                <span class="label label-info">Info</span>
                                <span class="label label-warning">Warning</span>
                                <span class="label label-danger">Danger</span>
                            </p>
                            <div class="highlight"><pre><code class="html"><span class="nt">&lt;span</span> <span
                                            class="na">class=</span><span class="s">"label label-default"</span><span
                                            class="nt">&gt;</span>Default<span class="nt">&lt;/span&gt;</span>
                                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label label-primary"</span><span
                                            class="nt">&gt;</span>Primary<span class="nt">&lt;/span&gt;</span>
                                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label label-success"</span><span
                                            class="nt">&gt;</span>Success<span class="nt">&lt;/span&gt;</span>
                                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label label-warning"</span><span
                                            class="nt">&gt;</span>Warning<span class="nt">&lt;/span&gt;</span>
                                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"label label-danger"</span><span
                                            class="nt">&gt;</span>Danger<span class="nt">&lt;/span&gt;</span>
                                    </code></pre>
                            </div>
                            <br>
                            <p class="text-muted text-center">Easily highlight new or unread items by adding a <code>
                                    &lt;span class="badge"&gt;</code> to links, Bootstrap navs, and more.</p>
                            <p class="m-bot-none text-center">
                                <span class="badge">5</span>
                                <span class="badge badge-primary">10</span>
                                <span class="badge badge-success">15</span>
                                <span class="badge badge-info">20</span>
                                <span class="badge badge-inverse">25</span>
                                <span class="badge badge-warning">30</span>
                                <span class="badge badge-important">35</span>
                            </p>
                        </div>
                    </section>
                    <!--label and badge end-->
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <!--progress bar start-->
                    <section class="panel">
                        <header class="panel-heading">
                            Basic Progress Bars
                            <span class="tools pull-right">
                                        <a class="fa fa-chevron-down" href="javascript:;"></a>

                                        <a class="fa fa-times" href="javascript:;"></a>
                                    </span>
                        </header>
                        <div class="panel-body">
                            <div class="progress progress-xs">
                                <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60"
                                     role="progressbar" class="progress-bar">
                                    <span class="sr-only">60% Complete</span>
                                </div>
                            </div>
                            <div class="progress progress-xs">
                                <div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
                                     role="progressbar" class="progress-bar progress-bar-success">
                                    <span class="sr-only">40% Complete (success)</span>
                                </div>
                            </div>
                            <div class="progress progress-xs">
                                <div style="width: 20%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20"
                                     role="progressbar" class="progress-bar progress-bar-info">
                                    <span class="sr-only">20% Complete</span>
                                </div>
                            </div>
                            <div class="progress progress-xs">
                                <div style="width: 60%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60"
                                     role="progressbar" class="progress-bar progress-bar-warning">
                                    <span class="sr-only">60% Complete (warning)</span>
                                </div>
                            </div>
                            <div class="progress progress-xs">
                                <div style="width: 80%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80"
                                     role="progressbar" class="progress-bar progress-bar-danger">
                                    <span class="sr-only">80% Complete</span>
                                </div>
                            </div>
                            <p>Default progress bar code example.</p>
                            <div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span
                                            class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
                                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span
                                            class="na">role=</span><span class="s">"progressbar"</span> <span
                                            class="na">aria-valuenow=</span><span class="s">"60"</span> <span
                                            class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span
                                            class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 60%;"</span><span
                                            class="nt">&gt;</span>
                                        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span
                                            class="nt">&gt;</span>60% Complete<span class="nt">&lt;/span&gt;</span>
                                        <span class="nt">&lt;/div&gt;</span>
                                        <span class="nt">&lt;/div&gt;</span>
                                    </code></pre>
                            </div>
                            <h4>With label</h4>
                            <p>Remove the <code>.sr-only</code> class from within the progress bar to show a visible
                                percentage. For low percentages, consider adding a <code>min-width</code> to ensure the
                                label's text is fully visible.</p>
                            <div class="progress">
                                <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60"
                                     role="progressbar" class="progress-bar">
                                    60%
                                </div>
                            </div>
                            <h4>
                                Stacked Progress Bars
                            </h4>
                            <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
                            <div class="progress progress-sm">
                                <div style="width: 35%" class="progress-bar progress-bar-success">
                                    <span class="sr-only">35% Complete (success)</span>
                                </div>
                                <div style="width: 20%" class="progress-bar progress-bar-warning">
                                    <span class="sr-only">20% Complete (warning)</span>
                                </div>
                                <div style="width: 10%" class="progress-bar progress-bar-danger">
                                    <span class="sr-only">10% Complete (danger)</span>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!--progress bar end-->

                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <!--progress bar start-->
                    <section class="panel">
                        <header class="panel-heading">
                            Striped Progress Bars
                            <span class="tools pull-right">
                                        <a class="fa fa-chevron-down" href="javascript:;"></a>

                                        <a class="fa fa-times" href="javascript:;"></a>
                                    </span>
                        </header>
                        <div class="panel-body">
                            <div class="progress progress-striped progress-sm">
                                <div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
                                     role="progressbar" class="progress-bar progress-bar-success">
                                    <span class="sr-only">40% Complete (success)</span>
                                </div>
                            </div>
                            <div class="progress progress-striped progress-sm">
                                <div style="width: 20%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20"
                                     role="progressbar" class="progress-bar progress-bar-info">
                                    <span class="sr-only">20% Complete</span>
                                </div>
                            </div>
                            <div class="progress progress-striped progress-sm">
                                <div style="width: 60%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60"
                                     role="progressbar" class="progress-bar progress-bar-warning">
                                    <span class="sr-only">60% Complete (warning)</span>
                                </div>
                            </div>
                            <div class="progress progress-striped progress-sm">
                                <div style="width: 80%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80"
                                     role="progressbar" class="progress-bar progress-bar-danger">
                                    <span class="sr-only">80% Complete (danger)</span>
                                </div>
                            </div>
                            <h4>
                                Animated Progress Bars
                            </h4>
                            <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right
                                to left. Not available in IE9 and below.</p>
                            <div class="progress progress-striped active progress-sm">
                                <div style="width: 45%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="45"
                                     role="progressbar" class="progress-bar progress-bar-success">
                                    <span class="sr-only">45% Complete</span>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!--progress bar end-->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- panel -->
<div>
    <h3 class="panel-title-m">Panel</h3>
    <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
    <div class="panel panel-default">
        <div class="panel-body">
            Basic panel example
        </div>
    </div>
    <div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span
                    class="s">"panel panel-default"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel-body"</span><span
                    class="nt">&gt;</span>
                Basic panel example
                <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            </code></pre>
    </div>

    <div class="row">
        <div class="col-md-6">
            <h3>Panel with heading</h3>
            <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any
                <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a
                pre-styled heading.</p>
            <div class="panel panel-default">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>

            <h3>Panel with footer</h3>
            <p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers <strong>do
                    not</strong> inherit colors and borders when using contextual variations as they are not meant to be
                in the foreground.</p>
            <div class="panel panel-default">
                <div class="panel-body">
                    Panel content
                </div>
                <div class="panel-footer">Panel footer</div>
            </div>


            <div class="row">
                <div class="col-md-12">
                    <h3>Custom panel</h3>
                    <div class="panel">
                        <header class="panel-heading">
                            Panel Tittle
                            <span class="tools pull-right">
                                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                                        <a href="javascript:;" class="fa fa-times"></a>
                                     </span>
                        </header>
                        <div class="panel-body">
                            Panel Contents
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            Panel title
                            <span class="tools pull-right">
                                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                                        <a href="javascript:;" class="fa fa-times"></a>
                                     </span>
                        </div>
                        <div class="panel-body">
                            Panel content
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-6">
            <h3>Contextual alternatives</h3>
            <p>Like other components, easily make a panel more meaningful to a particular context by adding any of the
                contextual state classes.</p>

            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>

            <div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span
                            class="na">class=</span><span class="s">"panel panel-primary"</span><span
                            class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel panel-success"</span><span
                            class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span
                            class="s">"panel panel-info"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel panel-warning"</span><span
                            class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel panel-danger"</span><span
                            class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
                    </code></pre>
            </div>
        </div>
    </div>
</div>

<!-- bootstap grid system -->
<div>
    <h3 class="panel-title-m">Bootstap grid system</h3>
    <div class="row">
        <div class="col-lg-12"><p class="hd-title">Base on Bootstrap grid system.</p></div>
        <div class="col-lg-12">
            <section class="panel">
                <div class="panel-body">col-lg-12</div>
            </section>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <section class="panel">
                <div class="panel-body">col-lg-6</div>
            </section>
        </div>
        <div class="col-lg-6">
            <section class="panel">
                <div class="panel-body">col-lg-6</div>
            </section>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4">
            <section class="panel">
                <div class="panel-body">col-lg-4</div>
            </section>
        </div>
        <div class="col-lg-4">
            <section class="panel">
                <div class="panel-body">col-lg-4</div>
            </section>
        </div>
        <div class="col-lg-4">
            <section class="panel">
                <div class="panel-body">col-lg-4</div>
            </section>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3">
            <section class="panel">
                <div class="panel-body">col-lg-3</div>
            </section>
        </div>
        <div class="col-lg-3">
            <section class="panel">
                <div class="panel-body">col-lg-3</div>
            </section>
        </div>
        <div class="col-lg-3">
            <section class="panel">
                <div class="panel-body">col-lg-3</div>
            </section>
        </div>
        <div class="col-lg-3">
            <section class="panel">
                <div class="panel-body">col-lg-3</div>
            </section>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-2">
            <section class="panel">
                <div class="panel-body">col-lg-2</div>
            </section>
        </div>
        <div class="col-lg-2">
            <section class="panel">
                <div class="panel-body">col-lg-2</div>
            </section>
        </div>
        <div class="col-lg-2">
            <section class="panel">
                <div class="panel-body">col-lg-2</div>
            </section>
        </div>
        <div class="col-lg-2">
            <section class="panel">
                <div class="panel-body">col-lg-2</div>
            </section>
        </div>
        <div class="col-lg-2">
            <section class="panel">
                <div class="panel-body">col-lg-2</div>
            </section>
        </div>
        <div class="col-lg-2">
            <section class="panel">
                <div class="panel-body">col-lg-2</div>
            </section>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12"><p class="hd-title">Mobile, tablet, and desktop</p></div>
    </div>
    <div class="row">
        <div class="col-lg-4">
            <div class="row">
                <div class="col-xs-6">
                    <section class="panel">
                        <div class="panel-body">col-xs-6</div>
                    </section>
                </div>
                <div class="col-xs-6">
                    <section class="panel">
                        <div class="panel-body">col-xs-6</div>
                    </section>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <section class="panel">
                <div class="panel-body">col-lg-8</div>
            </section>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="row">
                <div class="col-sm-6">
                    <section class="panel">
                        <div class="panel-body">col-sm-6</div>
                    </section>
                </div>
                <div class="col-sm-6">
                    <section class="panel">
                        <div class="panel-body">col-sm-6</div>
                    </section>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <section class="panel">
                <div class="panel-body">col-lg-6</div>
            </section>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-8">
            <div class="row">
                <div class="col-md-6">
                    <section class="panel">
                        <div class="panel-body">col-md-6</div>
                    </section>
                </div>
                <div class="col-md-6">
                    <section class="panel">
                        <div class="panel-body">col-md-6</div>
                    </section>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <section class="panel">
                <div class="panel-body">col-lg-4</div>
            </section>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <section class="panel">
                <div class="panel-body">col-sm-6</div>
            </section>
        </div>
        <div class="col-sm-6">
            <section class="panel">
                <div class="panel-body">col-sm-6</div>
            </section>
        </div>
    </div>
</div>

<!-- form layout -->
<div>
    <h3 class="panel-title-m">Form Layout</h3>
    <div class="row">
        <div class="col-lg-6">
            <section class="panel">
                <header class="panel-heading">
                    Basic Forms
                </header>
                <div class="panel-body">
                    <form role="form">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1"
                                   placeholder="Password">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputFile">File input</label>
                            <input type="file" id="exampleInputFile">
                            <p class="help-block">Example block-level help text here.</p>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Check me out
                            </label>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>

                </div>
            </section>
        </div>
        <div class="col-lg-6">
            <section class="panel">
                <header class="panel-heading">
                    Horizontal Forms
                </header>
                <div class="panel-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="inputEmail1" class="col-lg-2 col-sm-2 control-label">Email</label>
                            <div class="col-lg-10">
                                <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
                                <p class="help-block">Example block-level help text here.</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword1" class="col-lg-2 col-sm-2 control-label">Password</label>
                            <div class="col-lg-10">
                                <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
                                <!--<p class="help-block">Example block-level help text here.</p>-->
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputFile2" class="col-lg-2 col-sm-2 control-label">File input</label>
                            <div class="col-lg-10">
                                <input type="file" id="exampleInputFile2">
                                <p class="help-block">Example block-level help text here.</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-offset-2 col-lg-10">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox"> Remember me
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-offset-2 col-lg-10">
                                <button type="submit" class="btn btn-primary">Sign in</button>
                            </div>
                        </div>
                    </form>
                </div>
            </section>

        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <section class="panel">
                <header class="panel-heading">
                    Inline form
                </header>
                <div class="panel-body">
                    <form class="form-inline" role="form">
                        <div class="form-group">
                            <label class="sr-only" for="exampleInputEmail2">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="exampleInputPassword2">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword2"
                                   placeholder="Password">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Remember me
                            </label>
                        </div>
                        <button type="submit" class="btn btn-primary">Sign in</button>
                    </form>

                </div>
            </section>

        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <section class="panel">

                <div class="panel-body">
                    <a href="#myModal" data-toggle="modal" class="btn btn-xs btn-info">
                        Form in Modal
                    </a>
                    <a href="#myModal-1" data-toggle="modal" class="btn btn-xs btn-success">
                        Form in Modal 2
                    </a>
                    <a href="#myModal-2" data-toggle="modal" class="btn btn-xs btn-warning">
                        Form in Modal 3
                    </a>

                    <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal"
                         class="modal fade">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×
                                    </button>
                                    <h4 class="modal-title">Form Tittle</h4>
                                </div>
                                <div class="modal-body">

                                    <form role="form">
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">Email address</label>
                                            <input type="email" class="form-control" id="exampleInputEmail3"
                                                   placeholder="Enter email">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputPassword1">Password</label>
                                            <input type="password" class="form-control" id="exampleInputPassword3"
                                                   placeholder="Password">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputFile">File input</label>
                                            <input type="file" id="exampleInputFile3">
                                            <p class="help-block">Example block-level help text here.</p>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox"> Check me out
                                            </label>
                                        </div>
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal-1"
                         class="modal fade">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×
                                    </button>
                                    <h4 class="modal-title">Form Tittle</h4>
                                </div>
                                <div class="modal-body">

                                    <form class="form-horizontal" role="form">
                                        <div class="form-group">
                                            <label for="inputEmail1"
                                                   class="col-lg-2 col-sm-2 control-label">Email</label>
                                            <div class="col-lg-10">
                                                <input type="email" class="form-control" id="inputEmail4"
                                                       placeholder="Email">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputPassword1"
                                                   class="col-lg-2 col-sm-2 control-label">Password</label>
                                            <div class="col-lg-10">
                                                <input type="password" class="form-control" id="inputPassword4"
                                                       placeholder="Password">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-lg-offset-2 col-lg-10">
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox"> Remember me
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-lg-offset-2 col-lg-10">
                                                <button type="submit" class="btn btn-primary">Sign in</button>
                                            </div>
                                        </div>
                                    </form>

                                </div>

                            </div>
                        </div>
                    </div>
                    <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal-2"
                         class="modal fade">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×
                                    </button>
                                    <h4 class="modal-title">Form Tittle</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form-inline" role="form">
                                        <div class="form-group">
                                            <label class="sr-only" for="exampleInputEmail2">Email address</label>
                                            <input type="email" class="form-control sm-input" id="exampleInputEmail5"
                                                   placeholder="Enter email">
                                        </div>
                                        <div class="form-group">
                                            <label class="sr-only" for="exampleInputPassword2">Password</label>
                                            <input type="password" class="form-control sm-input"
                                                   id="exampleInputPassword5" placeholder="Password">
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox"> Remember me
                                            </label>
                                        </div>
                                        <button type="submit" class="btn btn-primary">Sign in</button>
                                    </form>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <section class="panel">
                <header class="panel-heading">
                    Iconic field
                </header>
                <div class="panel-body">
                    <form role="form">
                        <div class="form-group">
                            <label>Left Icon</label>
                            <div class="iconic-input">
                                <i class="fa fa-home"></i>
                                <input type="text" class="form-control" placeholder="left icon">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Right Icon</label>
                            <div class="iconic-input right">
                                <i class="fa fa-book"></i>
                                <input type="text" class="form-control" placeholder="left icon">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Input with Loading</label>
                            <input type="text" class="form-control spinner" placeholder="Something Processing">
                        </div>

                    </form>

                </div>
            </section>
        </div>
        <div class="col-lg-6">
            <section class="panel">
                <header class="panel-heading">
                    Horizontal Iconic Forms
                </header>
                <div class="panel-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-lg-3 col-sm-3 control-label">Left Icon</label>
                            <div class="col-lg-9">
                                <div class="iconic-input">
                                    <i class="fa fa-home"></i>
                                    <input type="text" class="form-control" placeholder="left icon">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 col-sm-3 control-label">Right Icon</label>
                            <div class="col-lg-9">
                                <div class="iconic-input right">
                                    <i class="fa fa-lock"></i>
                                    <input type="text" class="form-control" placeholder="right icon">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 col-sm-3 control-label">Input with Loading</label>
                            <div class="col-lg-9">
                                <div class="iconic-input right">
                                    <input type="text" class="form-control spinner" placeholder="Something Processing">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label col-lg-3">Button addons</label>
                            <div class="col-lg-9">
                                <div class="input-group m-bot15">
                                              <span class="input-group-btn">
                                                <button type="button" class="btn btn-default"><i
                                                        class="fa fa-search"></i></button>
                                              </span>
                                    <input type="text" class="form-control">
                                </div>

                            </div>
                        </div>

                    </form>
                </div>
            </section>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <section class="panel">
                <header class="panel-heading">
                    Form Elements
                </header>
                <div class="panel-body">
                    <form class="form-horizontal adminex-form" method="get">
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">Default</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">Help text</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control">
                                <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">Rounder</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control round-input">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">Input Tooltip</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control tooltips" data-trigger="hover"
                                       data-toggle="tooltip" title="" placeholder="Hover me"
                                       data-original-title="Tooltip goes here">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">Input Popover</label>
                            <div class="col-sm-10">
                                <input type="text" data-trigger="click" data-content="Content goes here..."
                                       data-original-title="The Title" data-placement="top" data-toggle="popover"
                                       class="form-control popovers" placeholder="Click Me">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">Input focus</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="focusedInput" type="text" value="This is focused...">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">Disabled</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="disabledInput" type="text"
                                       placeholder="Disabled input here..." disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">Placeholder</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="placeholder">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">Password</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 col-sm-2 control-label">Static control</label>
                            <div class="col-lg-10">
                                <p class="form-control-static">email@example.com</p>
                            </div>
                        </div>
                    </form>
                </div>
            </section>

            <section class="panel">
                <div class="panel-body">
                    <form class="form-horizontal adminex-form" method="get">
                        <div class="form-group">
                            <label class="col-sm-2 control-label col-lg-2" for="inputSuccess">Control sizing</label>
                            <div class="col-lg-10">
                                <input class="form-control input-lg m-bot15" type="text" placeholder=".input-lg">
                                <input class="form-control m-bot15" type="text" placeholder="Default input">
                                <input class="form-control input-sm m-bot15" type="text" placeholder=".input-sm">

                                <select class="form-control input-lg m-bot15">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                    <option>Option 3</option>
                                </select>
                                <select class="form-control m-bot15">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                    <option>Option 3</option>
                                </select>
                                <select class="form-control input-sm m-bot15">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                    <option>Option 3</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
            <section class="panel">
                <div class="panel-body">
                    <form class="form-horizontal adminex-form" method="get">
                        <div class="form-group has-success">
                            <label class="col-sm-2 control-label col-lg-2" for="inputSuccess">Input with success</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="inputSuccess">
                            </div>
                        </div>
                        <div class="form-group has-warning">
                            <label class="col-sm-2 control-label col-lg-2" for="inputWarning">Input with warning</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="inputWarning">
                            </div>
                        </div>
                        <div class="form-group has-error">
                            <label class="col-sm-2 control-label col-lg-2" for="inputError">Input with error</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="inputError">
                            </div>
                        </div>
                    </form>
                </div>
            </section>
            <section class="panel">
                <div class="panel-body">
                    <form class="form-horizontal adminex-form" method="get">
                        <div class="form-group">
                            <label class="col-sm-2 control-label col-lg-2" for="inputSuccess">Checkboxes and
                                radios</label>
                            <div class="col-lg-10">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" value="">
                                        Option one is this and that&mdash;be sure to include why it's great
                                    </label>
                                </div>

                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" value="">
                                        Option one is this and that&mdash;be sure to include why it's great option one
                                    </label>
                                </div>

                                <div class="radio">
                                    <label>
                                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"
                                               checked>
                                        Option one is this and that&mdash;be sure to include why it's great
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                        Option two can be something else and selecting it will deselect option one
                                    </label>
                                </div>

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label col-lg-2" for="inputSuccess">Inline checkboxes</label>
                            <div class="col-lg-10">
                                <label class="checkbox-inline">
                                    <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
                                </label>

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label col-lg-2" for="inputSuccess">Selects</label>
                            <div class="col-lg-10">
                                <select class="form-control m-bot15">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>

                                <select multiple class="form-control">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label col-lg-2" for="inputSuccess">Column sizing</label>
                            <div class="col-lg-10">
                                <div class="row">
                                    <div class="col-lg-2">
                                        <input type="text" class="form-control" placeholder=".col-lg-2">
                                    </div>
                                    <div class="col-lg-3">
                                        <input type="text" class="form-control" placeholder=".col-lg-3">
                                    </div>
                                    <div class="col-lg-4">
                                        <input type="text" class="form-control" placeholder=".col-lg-4">
                                    </div>
                                </div>

                            </div>
                        </div>

                    </form>
                </div>
            </section>
            <section class="panel">
                <header class="panel-heading">
                    Input groups
                </header>
                <div class="panel-body">
                    <form class="form-horizontal adminex-form" method="get">
                        <div class="form-group">
                            <label class="col-sm-2 control-label col-lg-2">Basic examples</label>
                            <div class="col-lg-10">
                                <div class="input-group m-bot15">
                                    <span class="input-group-addon">@</span>
                                    <input type="text" class="form-control" placeholder="Username">
                                </div>

                                <div class="input-group m-bot15">
                                    <input type="text" class="form-control">
                                    <span class="input-group-addon">.00</span>
                                </div>

                                <div class="input-group m-bot15">
                                    <span class="input-group-addon">$</span>
                                    <input type="text" class="form-control">
                                    <span class="input-group-addon ">.00</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label col-lg-2">Sizing</label>
                            <div class="col-lg-10">
                                <div class="input-group input-group-lg m-bot15">
                                    <span class="input-group-addon">@</span>
                                    <input type="text" class="form-control input-lg" placeholder="Username">
                                </div>

                                <div class="input-group m-bot15">
                                    <span class="input-group-addon">@</span>
                                    <input type="text" class="form-control" placeholder="Username">
                                </div>

                                <div class="input-group input-group-sm m-bot15">
                                    <span class="input-group-addon">@</span>
                                    <input type="text" class="form-control" placeholder="Username">
                                </div>

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label col-lg-2">Checkboxe and radio</label>
                            <div class="col-lg-10">
                                <div class="input-group m-bot15">
                                              <span class="input-group-addon">
                                                <input type="checkbox">
                                              </span>
                                    <input type="text" class="form-control">
                                </div>

                                <div class="input-group m-bot15">
                                              <span class="input-group-addon">
                                                <input type="radio">
                                              </span>
                                    <input type="text" class="form-control">
                                </div>

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label col-lg-2">Button addons</label>
                            <div class="col-lg-10">
                                <div class="input-group m-bot15">
                                              <span class="input-group-btn">
                                                <button class="btn btn-default" type="button">Go!</button>
                                              </span>
                                    <input type="text" class="form-control">
                                </div>

                                <div class="input-group m-bot15">
                                    <input type="text" class="form-control">
                                    <span class="input-group-btn">
                                                <button class="btn btn-default" type="button">Go!</button>
                                              </span>
                                </div>

                                <div class="input-group m-bot15">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default dropdown-toggle"
                                                data-toggle="dropdown">Action <span class="caret"></span></button>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="input-group m-bot15">
                                    <input type="text" class="form-control">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default dropdown-toggle"
                                                data-toggle="dropdown">Action <span class="caret"></span></button>
                                        <ul class="dropdown-menu pull-right">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label col-lg-2">Segmented buttons</label>
                            <div class="col-lg-10">
                                <div class="input-group m-bot15">
                                    <div class="input-group-btn">
                                        <button tabindex="-1" class="btn btn-default" type="button">Action</button>
                                        <button tabindex="-1" data-toggle="dropdown"
                                                class="btn btn-default dropdown-toggle" type="button">
                                            <span class="caret"></span>
                                        </button>
                                        <ul role="menu" class="dropdown-menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <input type="text" class="form-control">
                                </div>

                                <div class="input-group m-bot15">
                                    <input type="text" class="form-control">
                                    <div class="input-group-btn">
                                        <button tabindex="-1" class="btn btn-default" type="button">Action</button>
                                        <button tabindex="-1" data-toggle="dropdown"
                                                class="btn btn-default dropdown-toggle" type="button">
                                            <span class="caret"></span>
                                        </button>
                                        <ul role="menu" class="dropdown-menu pull-right">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
            </section>
            <section class="panel">
                <header class="panel-heading">
                    Textarea
                </header>
                <div class="panel-body">
                    <form method="get" class="form-horizontal bucket-form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Textarea label</label>
                            <div class="col-sm-10">
                                <textarea rows="6" class="form-control"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">

            <div class="panel" data-collapsed="0">

                <div class="panel-heading">
                    <div class="panel-title">
                        Input Grid
                    </div>
                </div>

                <div class="panel-body">

                    <div class="row">

                        <div class="col-md-12 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-12">
                        </div>

                        <div class="col-md-6 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-6">
                        </div>

                        <div class="col-md-6 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-6">
                        </div>


                        <div class="col-md-4 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-4">
                        </div>

                        <div class="col-md-4 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-4">
                        </div>

                        <div class="col-md-4 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-4">
                        </div>


                        <div class="col-md-3 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-3">
                        </div>

                        <div class="col-md-3 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-3">
                        </div>

                        <div class="col-md-3 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-3">
                        </div>

                        <div class="col-md-3 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-3">
                        </div>


                        <div class="col-md-2 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-2">
                        </div>

                        <div class="col-md-2 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-2">
                        </div>

                        <div class="col-md-2 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-2">
                        </div>

                        <div class="col-md-2 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-2">
                        </div>

                        <div class="col-md-2 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-2">
                        </div>

                        <div class="col-md-2 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-2">
                        </div>


                        <div class="col-md-1 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-1">
                        </div>

                        <div class="col-md-1 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-1">
                        </div>

                        <div class="col-md-1 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-1">
                        </div>

                        <div class="col-md-1 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-1">
                        </div>

                        <div class="col-md-1 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-1">
                        </div>

                        <div class="col-md-1 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-1">
                        </div>

                        <div class="col-md-1 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-1">
                        </div>

                        <div class="col-md-1 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-1">
                        </div>

                        <div class="col-md-1 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-1">
                        </div>

                        <div class="col-md-1 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-1">
                        </div>

                        <div class="col-md-1 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-1">
                        </div>

                        <div class="col-md-1 form-group">
                            <input type="text" class="form-control" placeholder=".col-md-1">
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>
</div>

<!-- basic grid -->
<div>
    <h3 class="panel-title-m">basic grid</h3>
    <div class="row">
        <div class="col-sm-6">
            <section class="panel">
                <header class="panel-heading">
                    Basic Table
                    <span class="tools pull-right">
                                <a href="javascript:;" class="fa fa-chevron-down"></a>
                                <a href="javascript:;" class="fa fa-times"></a>
                             </span>
                </header>
                <div class="panel-body">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </section>
        </div>
        <div class="col-sm-6">
            <section class="panel">
                <header class="panel-heading">
                    Striped Table
                    <span class="tools pull-right">
                                <a href="javascript:;" class="fa fa-chevron-down"></a>
                                <a href="javascript:;" class="fa fa-times"></a>
                             </span>
                </header>
                <div class="panel-body">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <section class="panel">
                <header class="panel-heading no-border">
                    Border Table
                    <span class="tools pull-right">
                                <a href="javascript:;" class="fa fa-chevron-down"></a>
                                <a href="javascript:;" class="fa fa-times"></a>
                             </span>
                </header>
                <div class="panel-body">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td rowspan="2">1</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@TwBootstrap</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td colspan="2">Larry the Bird</td>
                            <td>@twitter</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
        <div class="col-sm-6">
            <section class="panel">
                <header class="panel-heading">
                    Hover Table
                    <span class="tools pull-right">
                                <a href="javascript:;" class="fa fa-chevron-down"></a>
                                <a href="javascript:;" class="fa fa-times"></a>
                             </span>
                </header>
                <div class="panel-body">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td colspan="2">Larry the Bird</td>
                            <td>@twitter</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Jane Doe</td>
                            <td>Mosa</td>
                            <td>@twitter</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <section class="panel">
                <header class="panel-heading">
                    General Table
                    <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                </header>
                <div class="panel-body">
                    <table class="table  table-hover general-table">
                        <thead>
                        <tr>
                            <th> Company</th>
                            <th class="hidden-phone">Descrition</th>
                            <th>Profit</th>
                            <th>Status</th>
                            <th>Progress</th>
                        </tr>
                        </thead>
                        <tbody>

                        <tr>
                            <td>
                                <a href="#">
                                    ThemeBucket
                                </a>
                            </td>
                            <td class="hidden-phone">Lorem Ipsum dorolo</td>
                            <td>556.00$</td>
                            <td><span class="label label-warning label-mini">Due</span></td>
                            <td>
                                <div class="progress progress-striped progress-xs">
                                    <div style="width: 70%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
                                         role="progressbar" class="progress-bar progress-bar-danger">
                                        <span class="sr-only">70% Complete (success)</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">
                                    XYZ
                                </a>
                            </td>
                            <td class="hidden-phone">Lorem Ipsum dorolo</td>
                            <td>13240.00$</td>
                            <td><span class="label label-success label-mini">Paid</span></td>
                            <td>
                                <div class="progress progress-striped progress-xs">
                                    <div style="width: 55%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
                                         role="progressbar" class="progress-bar progress-bar-warning">
                                        <span class="sr-only">55% Complete (success)</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><a href="#">Graphics</a></td>
                            <td class="hidden-phone">Lorem Ipsum dorolo imit</td>
                            <td>1320.00$</td>
                            <td><span class="label label-info label-mini">Due</span></td>
                            <td>
                                <div class="progress progress-striped progress-xs">
                                    <div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
                                         role="progressbar" class="progress-bar progress-bar-success">
                                        <span class="sr-only">40% Complete (success)</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">
                                    BCSE
                                </a>
                            </td>
                            <td class="hidden-phone">Lorem Ipsum dorolo</td>
                            <td>3455.50$</td>
                            <td><span class="label label-danger label-mini">Paid</span></td>
                            <td>
                                <div class="progress progress-striped progress-xs">
                                    <div style="width: 90%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
                                         role="progressbar" class="progress-bar progress-bar-info">
                                        <span class="sr-only">90% Complete (success)</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><a href="#">AVC Ltd</a></td>
                            <td class="hidden-phone">Lorem Ipsum dorolo imit</td>
                            <td>110.00$</td>
                            <td><span class="label label-primary label-mini">Due</span></td>
                            <td>
                                <div class="progress progress-striped progress-xs">
                                    <div style="width: 60%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
                                         role="progressbar" class="progress-bar progress-bar-success">
                                        <span class="sr-only">60% Complete (success)</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">
                                    Themeforest
                                </a>
                            </td>
                            <td class="hidden-phone">Lorem Ipsum dorolo</td>
                            <td>456.00$</td>
                            <td><span class="label label-warning label-mini">Due</span></td>
                            <td>
                                <div class="progress progress-striped progress-xs">
                                    <div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
                                         role="progressbar" class="progress-bar progress-bar-danger">
                                        <span class="sr-only">40% Complete (success)</span>
                                    </div>
                                </div>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </div>
</div>

<!-- time line -->
<div class="panel">
    <div class="panel-heading">time line
    </div>
    <div class="panel-body" style="background:#ccc;">
        <div class="row">
            <div class="col-sm-12">
                <div class="timeline">
                    <article class="timeline-item alt">
                        <div class="text-right">
                            <div class="time-show first">
                                <a href="#" class="btn btn-primary">Today</a>
                            </div>
                        </div>
                    </article>
                    <article class="timeline-item alt">
                        <div class="timeline-desk">
                            <div class="panel">
                                <div class="panel-body">
                                    <span class="arrow-alt"></span>
                                    <span class="timeline-icon"></span>
                                    <span class="timeline-date">08:25 am</span>
                                    <h1 class="red">1 hour ago</h1>
                                    <p>Purchased new stationary items for head office </p>
                                </div>
                            </div>
                        </div>
                    </article>
                    <article class="timeline-item ">
                        <div class="timeline-desk">
                            <div class="panel">
                                <div class="panel-body">
                                    <span class="arrow"></span>
                                    <span class="timeline-icon"></span>
                                    <span class="timeline-date">10:00 am</span>
                                    <h1 class="green">2 hours ago</h1>
                                    <p>Completed Coffee meeting with <a href="#">Stive Martin</a> regarding the Product
                                        Promotion</p>
                                </div>
                            </div>
                        </div>
                    </article>
                    <article class="timeline-item alt">
                        <div class="timeline-desk">
                            <div class="panel">
                                <div class="panel-body">
                                    <span class="arrow-alt"></span>
                                    <span class="timeline-icon"></span>
                                    <span class="timeline-date">11:35 am</span>
                                    <h1 class="blue">10 hours ago</h1>
                                    <p>3 new photo Uploaded on facebook fan page</p>
                                    <div class="album">
                                        <a href="#">
                                            <img alt="" src="images/gallery/sm-img-1.jpg">
                                        </a>
                                        <a href="#">
                                            <img alt="" src="images/gallery/sm-img-2.jpg">
                                        </a>
                                        <a href="#">
                                            <img alt="" src="images/gallery/sm-img-3.jpg">
                                        </a>
                                        <a href="#">
                                            <img alt="" src="images/gallery/sm-img-1.jpg">
                                        </a>
                                        <a href="#">
                                            <img alt="" src="images/gallery/sm-img-2.jpg">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                    <article class="timeline-item">
                        <div class="timeline-desk">
                            <div class="panel">
                                <div class="panel-body">
                                    <span class="arrow"></span>
                                    <span class="timeline-icon"></span>
                                    <span class="timeline-date">3:20 pm</span>
                                    <h1 class="purple">4:30</h1>
                                    <p>Outdoor visit at California State Route 85 with John Boltana &amp; Harry Piterson
                                        regarding to setup a new show room.</p>
                                    <p>
                                        <i class=" fa fa-exclamation-sign"></i> New task added for <span><a href="#"
                                                                                                            class="purple">Denial Collins</a></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </article>
                    <article class="timeline-item alt">
                        <div class="timeline-desk">
                            <div class="panel">
                                <div class="panel-body">
                                    <span class="arrow-alt"></span>
                                    <span class="timeline-icon"></span>
                                    <span class="timeline-date">07:49 pm</span>
                                    <h1 class="light-green">10 June | Friday</h1>
                                    <p>Jonatha Smith added new milestone <span><a href="#" class="light-green">prank</a></span>
                                        Lorem ipsum dolor sit amet consiquest dio</p>
                                </div>
                            </div>
                        </div>
                    </article>

                    <article class="timeline-item alt">
                        <div class="text-right">
                            <div class="time-show">
                                <a href="#" class="btn btn-primary">Yesterday</a>
                            </div>
                        </div>
                    </article>
                    <article class="timeline-item">
                        <div class="timeline-desk">
                            <div class="panel">
                                <div class="panel-body">
                                    <span class="arrow"></span>
                                    <span class="timeline-icon"></span>
                                    <span class="timeline-date">3:20 pm</span>
                                    <h1 class="yellow">4:30</h1>
                                    <p>Montly Regular Medical check up at Greenland Hospital by the doctor <span><a
                                                href="#" class="yellow">  Berry Moor </a></span></p>

                                </div>
                            </div>
                        </div>
                    </article>
                    <article class="timeline-item alt">
                        <div class="timeline-desk">
                            <div class="panel">
                                <div class="panel-body">
                                    <span class="arrow-alt"></span>
                                    <span class="timeline-icon"></span>
                                    <span class="timeline-date">07:49 pm</span>
                                    <h1 class="">4:55</h1>
                                    <p>Download the new updates of SAP ERP Solution</p>
                                </div>
                            </div>
                        </div>
                    </article>

                    <article class="timeline-item">
                        <div class="timeline-desk">
                            <div class="panel">
                                <div class="panel-body">
                                    <span class="arrow"></span>
                                    <span class="timeline-icon"></span>
                                    <span class="timeline-date">07:49 pm</span>
                                    <h1 class="blue">10 June | Friday</h1>
                                    <p>Jonatha Smith added new milestone <span><a class="blue" href="#">prank</a></span>
                                        Lorem ipsum dolor sit amet consiquest dio</p>
                                </div>
                            </div>
                        </div>
                    </article>
                    <article class="timeline-item alt">
                        <div class="text-right">
                            <div class="time-show">
                                <a href="#" class="btn btn-primary">20 December 2013</a>
                            </div>
                        </div>
                    </article>

                    <article class="timeline-item alt">
                        <div class="timeline-desk">
                            <div class="panel">
                                <div class="panel-body">
                                    <span class="arrow-alt"></span>
                                    <span class="timeline-icon"></span>
                                    <span class="timeline-date">07:49 pm</span>
                                    <h1 class="">13 March | Sunday</h1>
                                    <p>Download the new updates of SAP ERP Solution</p>
                                </div>
                            </div>
                        </div>
                    </article>

                    <article class="timeline-item">
                        <div class="timeline-desk">
                            <div class="panel">
                                <div class="panel-body">
                                    <span class="arrow"></span>
                                    <span class="timeline-icon"></span>
                                    <span class="timeline-date">07:49 pm</span>
                                    <h1 class="red">5:33</h1>
                                    <p>Jonatha Smith added new milestone <span><a class="red" href="#">prank</a></span>
                                        Lorem ipsum dolor sit amet consiquest dio</p>
                                </div>
                            </div>
                        </div>
                    </article>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="panel">
    <div class="panel-heading">slide toggle
    </div>
    <div class="panel-body" style="background:#ccc;">
        <div class="row">
            <div class="col-sm-12">
                <div class="slide-toggle">
                    <div>
                        <input type="checkbox" class="js-switch" checked/>
                    </div>
                    <div>
                        <input type="checkbox" class="js-switch-blue" checked/>
                    </div>
                    <div>
                        <input type="checkbox" class="js-switch-pink" checked/>
                    </div>
                    <div>
                        <input type="checkbox" class="js-switch-teal" checked/>
                    </div>
                    <div>
                        <input type="checkbox" class="js-switch-red" checked/>
                    </div>
                    <div>
                        <input type="checkbox" class="js-switch-yellow" checked/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


